<template>
  <div class="navigation">
    <el-row ref="needShowTermDom" class="navigation-row">
      <searchCard/>
      <clickCountRank/>
      <topCard/>
    </el-row>
    <transition name="el-zoom-in-top">
      <el-row v-if="scrollIndex>needShowTerm" style="top: 60px;position: fixed;width: 25%;" class="navigation-row">
        <searchCard style="width: 100%;"/>
      </el-row>
    </transition>
  </div>
</template>

<script>
import searchCard from './component/searchCard'
import clickCountRank from './component/clickCountRank'
import topCard from './component/topCard'

export default {
  name: 'navigation',
  data () {
    return {
      searchArticleTitle: '',
      scrollIndex: 0,
      needShowTerm: 0
    }
  },
  components: {searchCard, clickCountRank, topCard},
  mounted: function () {
    this.needShowTerm = this.$refs.needShowTermDom.$el.offsetHeight
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      this.scrollIndex = document.documentElement.scrollTop
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
  .navigation-row {
    padding-left: 5px;
    padding-right: 5px;
  }

  .navigation-row * {
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
